<template>
  <div class="app">
      <el-row>
        <el-col :span="24" class="outter-div">
            <div class="grid-content">
                <div id="top" class="inner-div">
                </div>
                <div id="sec" class="inner-div">
                    <span id="szwm">
                        <a href="http://sz.wenming.cn/wmbb/"><img src="./assets/index_02.gif" /></a>
                    </span>
                    <span id="swf">
                        <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="775px" height="142px" autoplay="true"> 
                            <param name="movie" value="http://images1.wenming.cn/web_jssz/images/top.swf"/> 
                            <param name="quality" value="high"/> 
                            <param name="autoPlay" value="true"></param>
                            <param name="auto" value="true" /> 
                            <param name="loop" value="true" />
                            <param name="play" value="true" /> 
                            <embed  flashvars="autoplay=true&play=true"  src="http://sz.wenming.cn/images/top.swf?IsAutoPlay=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="775px" height="142px" class="swfc" auto="true" play="true" autoplay="true" autostart="true"> 
                        </object>
                    </span>
                </div>
            </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="outter-div">
            <div class="grid-content border-wrapper">
                <div class="banner inner-div">
                    <h3 class="banner-text">长征</h3>
                </div>
                <div class="wm-content inner-div">
                    <ul>
                         <router-link  v-for="(article, index) in cz" v-bind:to="'/articles/' + index + '?type=cz'">
                            <li class="article-item under-line">
                                {{article.title}}      （{{article.date}}）
                            </li>
                        </router-link>
                    </ul>
                </div>
            </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="outter-div">
            <div class="grid-content border-wrapper">
                <div class="banner inner-div">
                    <h3 class="banner-text">德育</h3>
                </div>
                <div class="wm-content inner-div">
                    <ul>
                         <router-link  v-for="(article, index) in dy" v-bind:to="'/articles/' + index + '?type=dy'">
                            <li class="article-item under-line">
                                {{article.title}}      （{{article.date}}）
                            </li>
                        </router-link>
                    </ul>
                </div>
            </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="outter-div">
            <div class="last-row-inner">
               <p class="last-img"><img src="./assets/qy.png" width="208px" height="142px"></p>
               <p class="last-cr">版权所有：苏州高新区秦馀小学校 地址：苏州浒关开发区太湖大道阳山东路旺巷廊街 邮编：215151 联系电话：0512-68558032 维护：信息中心 苏ICP备15043558号</p>
            </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import data from "./data.js";

export default {
  name: 'app',
  components: {
  },
  data() {
      return data;
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

#swf{
    width: 775px;
    height: 142px;
}

.swfc {
    float: right;
    display: inline;
}

.outter-div {
    text-align: center;
}

.last-row-inner {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.last-cr {
    text-align: center;
    line-height: 28px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.last-img {
    text-align: right;
    /*float: right;*/
}

.border-wrapper {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #E0E0E0;
}

.inner-div {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#top {
    background: url("./assets/index_04.gif") repeat-x center;
    width: 980px;
    height: 38px;
}

#sec {
    background: url("./assets/index_05.gif") repeat-y center;
    width: 980px;
    height: 142px;
    text-align: center;
}

#szwm img {
float:left;
    width: 205px;
    height: 142px;
}

#qy img {
    width: 205px;
    height: 142px;
}

.banner {
    width: 980px;
    height: 34px;
    background: url("./assets/ziye_01.gif") no-repeat left;
}

.banner-text {
    margin-left: 40px;
}

.wm-content {
    width: 980px;
}

.under-line {
    border-bottom: 1px dashed #ddd;
}

.article-item {
    margin-top: 10px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
      margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;

}
.bg-dark-white {
    background: #F9FAFC;
}
.bg-purple-dark {
  background: #99a9bf;

}
.bg-purple {
  background: #d3dce6;

}
.bg-purple-light {
  background: #e5e9f2;

}
.grid-content {
  border-radius: 4px;
    min-height: 36px;
}
.row-bg {
  padding: 10px 0;
    background-color: #f9fafc;

}
</style>
